<!DOCTYPE html>
<html>
<head>
  <title>No.5</title>
  <style>
    body {
      background-color: black;
    }
    .stage {
      -webkit-perspective: 600px;
              perspective: 600px;
      -webkit-perspective-origin: 52% 100px;
              perspective-origin: 52% 100px;
    }
    .container {
      position: relative;
      margin: 100px auto;
      width: 206px;
      -webkit-transform-origin: center center 103px;
         -moz-transform-origin: center center 103px;
           -o-transform-origin: center center 103px;
              transform-origin: center center 103px;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
    }
    .container:hover {
      -webkit-animation: myrotate 4s linear infinite;
              animation: myrotate 4s linear infinite;
    }
    .container li {
      position: absolute;
      border: 3px solid blue;
      width: 200px;
      height: 200px;
      list-style: none;
      opacity: 0.5;
      background-color: #d0e9ff;
    }
    .front {
      -webkit-transform: translateZ(206px);
         -moz-transform: translateZ(206px);
           -o-transform: translateZ(206px);
              transform: translateZ(206px);
      opacity: 0.5;
      z-index: 2;
    }
    .top {
      -webkit-transform-origin: 0 0;
      -webkit-transform: rotateX(90deg);

      -moz-transform-origin: 0 0;
      -moz-transform: rotateX(90deg);

      -o-transform-origin: 0 0;
      -o-transform: rotateX(90deg);

      transform-origin: 0 0;
      transform: rotateX(90deg);      
    }
    .bottom {
      -webkit-transform-origin: 0 100%;
      -webkit-transform: rotateX(-90deg);

      -moz-transform-origin: 0 100%;
      -moz-transform: rotateX(-90deg);

      -o-transform-origin: 0 100%;
      -o-transform: rotateX(-90deg);

      transform-origin: 0 100%;
      transform: rotateX(-90deg);      
    }
    .left {
      -webkit-transform-origin: 0 0;
      -webkit-transform: rotateY(-90deg);

      -moz-transform-origin: 0 0;
      -moz-transform: rotateY(-90deg);

      -o-transform-origin: 0 0;
      -o-transform: rotateY(-90deg);

      transform-origin: 0 0;
      transform: rotateY(-90deg);      
    }
    .right {
      -webkit-transform-origin: 100% 0;
      -webkit-transform: rotateY(90deg);

      -moz-transform-origin: 100% 0;
      -moz-transform: rotateY(90deg);

      -o-transform-origin: 100% 0;
      -o-transform: rotateY(90deg);

      transform-origin: 100% 0;
      transform: rotateY(90deg);      
    }
    @keyframes myrotate {
      0%{
        transform: rotateY(0);
      }
      100%{
        transform: rotateY(-360deg);
      }
    }
  </style>
</head>
<body>
<div class="stage">
  <ul class="container">
    <li class="front"></li>
    <li class="back"></li>
    <li class="left"></li>
    <li class="right"></li>
    <li class="top"></li>
    <li class="bottom"></li>
  </ul>
  </div>
</body>
</html>